Pseudo-elements allow you to style specific parts of an element or insert content without modifying the HTML. Some pseudo-elements are widely used for text formatting and decorative purposes.

Common Pseudo-Elements

1
::before - Inserts content before an element's content.
2
::after - Inserts content after an element's content.
3
::first-letter - Styles the first letter of a block-level element.
4
::first-line - Styles the first line of a block-level element.
5
::selection - Styles the portion of text selected by the user.
6
::placeholder - Styles the placeholder text of input elements.
7
::marker - Styles the marker of list items (li).

Example: Using Multiple Pseudo-Elements

In this example, ::first-letter styles the first letter, ::before and ::after add decorative content, ::placeholder styles the input placeholder, and ::selection changes the appearance of selected text.

Best Practices

1
Use pseudo-elements for decorative or structural styling without extra HTML.
2
Combine them with CSS properties like content, color, font-size, and background.
3
Test across browsers to ensure consistent behavior.
4
Avoid using pseudo-elements for interactive content that requires JavaScript functionality.

Difficulty: 3/10

Topics: ::before, ::after, ::first-line

Scenario Questions

0-2 years experience

1
How would you add a star icon before every review rating using CSS without changing the HTML?
2
What happens if you try to style ::content or ::text — why won’t it work?
3
You’re trying to add a tooltip arrow using ::after, but it’s not showing up — what’s the most likely missing CSS rule?

2-5 years experience

1
A designer wants a decorative border around a quote block using ::before and ::after, but it’s breaking on mobile — how would you debug this?
2
Your team’s CSS library uses ::before for icons, but now accessibility testers say screen readers are reading the content — how do you fix that without removing the visual effect?
3
A button’s ::after hover effect works in Chrome but not Safari — what’s your debugging process?

5-8 years experience

1
You’re building a scalable component library where pseudo-elements are used for state indicators — how do you ensure they don’t conflict with user-defined content or break in shadow DOM?
2
A legacy component uses ::before to inject loading spinners via CSS content — but now we’re migrating to a framework that dynamically renders content. How do you refactor this without breaking existing styles?
3
How would you optimize a UI with dozens of elements using ::before/::after for icons, and what performance tradeoffs should you consider in a high-traffic app?

8+ years experience

1
Your company’s design system relies heavily on pseudo-elements for visual states across 50+ components — how do you architect a migration to CSS custom properties or a modern alternative without breaking thousands of downstream usages?
2
Pseudo-elements are used for accessibility-enhanced tooltips in a legacy enterprise app, but they’re causing reflow issues on low-end devices. How do you propose a long-term architectural shift while maintaining backward compatibility?
3
How would you evaluate whether to deprecate pseudo-element-based UI patterns in favor of SVG or web components in a large codebase with multiple teams and no centralized style governance?

Follow-up Questions

❓What happens if you forget to set the content property on ::before?
❓Can you style ::first-letter differently from ::first-line?
❓Why might a pseudo-element not render even when the CSS looks correct?